<template>
  <div class="Home">
    <video src="../assets/video/001.mp4" muted autoplay loop></video>
    <div class="login">
      <svg class="icon" aria-hidden="true" @click="flag = !flag">
        <use
          :xlink:href="flag ? '#icon-diannaojiaobiao' : '#icon-erweimajiaobiao'"
        ></use>
      </svg>
      <h1>路平后台管理系统</h1>

      <div class="erwei" v-if="flag">
        <div class="mask" v-if="maskFalg">
          <svg class="icon-succeed" aria-hidden="true">
            <use xlink:href="#icon-dengluchenggong"></use>
          </svg>
        </div>
        <img :src="qrImg" alt="" class="" />
        <p>微信扫码登录</p>
      </div>
      <!-- input登录框 -->
      <el-form
        :model="loginFrom"
        status-icon
        :rules="rules"
        ref="loginFrom"
        label-width="100px"
        class="demo-loginFrom"
        v-else
      >
        <el-form-item label="用户名:" prop="userName">
          <el-input
            type="text"
            v-model="loginFrom.userName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input
            type="password"
            v-model="loginFrom.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码:" prop="captCha">
          <el-input
            type="text"
            v-model="loginFrom.captCha"
            autocomplete="off"
            class="captcha"
            @keydown.native.enter="submitForm('loginFrom')"
          ></el-input>
          <div class="input-right" v-html="captCha" @click="refresh"></div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginFrom')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <img
      class="bj"
      src="http://chst.vip:8081/stu2/img/bg2.fc58c850.png"
      alt=""
      width="350px"
      height="350px"
    />
  </div>
</template>

<script>
//引入vuex
import { mapMutations } from "vuex";
//引入socket.io
import io from "socket.io-client";

/* 引入qrcode */
import qr from "qrcode";
import {
  loginApi,
  CaptchaApi,
  verifyApi,
  getcodeUrlApi,
  wechatLogin,
} from "@/api";

/* 用户名 */
var validateUsn = (rule, value, callback) => {
  //4到16位(字母，数字，下滑线)
  var reg0 = /^[0-9a-zA-Z_]{1,}$/;
  if (!reg0.test(value)) {
    callback("4到16位(字母，数字，下滑线)");
  } else {
    callback();
  }
};
/* 密码 */
var validatePsw = (rule, value, callback) => {
  if (!value) {
    callback("密码不能为空");
  } else {
    callback();
  }
};
/* 验证码 */
var validateCha = (rule, value, callback) => {
  if (!value) {
    callback("验证码不能为空");
  } else {
    callback();
  }
};

export default {
  /* 钩子 */
  created() {
    this.refresh();
  },
  /* 数据 */
  data() {
    return {
      loginFrom: {
        userName: "",
        password: "",
        captCha: "",
      },
      captCha: "",
      flag: false, //true的时候二维码显示
      maskFalg: false, //ture的时候 遮罩显示
      qrImg: "",
      rules: {
        userName: [{ validator: validateUsn, trigger: "blur" }],
        password: [{ validator: validatePsw, trigger: "blur" }],
        captCha: [{ validator: validateCha, trigger: "blur" }],
      },
    };
  },

  /* 方法 */
  methods: {
    ...mapMutations(["SET_USERINFO", "SET_USERBUTTONS"]),
    /* 请求验证码 */
    refresh() {
      CaptchaApi().then((res) => {
        this.captCha = res.data.img;
      });
    },
    /* 账户 密码校验通过 在验证 验证码 */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          /* 加入等待动画 */
          const loading = this.$loading({
            lock: true,
            text: "正在为你努力加载",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          /* 解构表单中的数据 */
          let { userName, password, captCha } = this.loginFrom;
          /* 校正 验证码 */
          verifyApi(this.loginFrom.captCha).then((res) => {
            if (res.data.state) {
              //登录成功
              /* 权限按钮存道vuex中 */

              loginApi(userName, password).then((res) => {
                if (res.data.state) {
                  //讲token存入到本地
                  console.log(res);
                  this.SET_USERBUTTONS(res.data.permission.buttons);
                  localStorage.setItem(
                    "lp-userbutton",
                    JSON.stringify(res.data.permission.buttons)
                  );
                  localStorage.setItem("lp-token", res.data.token);
                  localStorage.setItem(
                    "lp-userInfo",
                    JSON.stringify(res.data.userInfo)
                  );
                  this.SET_USERINFO(res.data.userInfo);
                  //跳转页面
                  loading.close(); //关闭动画
                  this.$router.push("/");
                } else {
                  this.$notify.error({
                    title: "错误",
                    message: "用户名或者密码错误",
                  });
                  loading.close(); //关闭动画
                }
              });
            } else {
              this.$notify.error({
                title: "错误",
                message: "请输入正确的验证码",
              });
              this.refresh();
              loading.close(); //关闭动画
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  /* 二维码 */
  watch: {
    flag(newVal) {
      if (newVal == true) {
        /* 求情生成二维码的数据 */
        let scoket = io("ws://chst.vip"); //请求
        /* 连接成功事件 */
        scoket.on("connect", () => {
          getcodeUrlApi().then((res) => {
            // console.log(res);
            let qrUrl = res.data.scanCodeUrl; //获取了二维码地址
            /* 生成二维码 */
            qr.toDataURL(qrUrl, (err, urlImg) => {
              if (err) throw err;
              // console.log(urlImg);
              this.qrImg = urlImg;
            });
          });
        });
        /* 扫码成功事件 */
        scoket.on("scancodeSuccess", (data) => {
          /* console.log(data);
          console.log(777); */
          /* 加入加载动画 */
          const loading = this.$loading({
            lock: true,
            text: "正在为你努力加载",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          const wechatCode = data.wechatCode;
          this.maskFalg = true;
          wechatLogin(wechatCode).then((res) => {
            /*  console.log(res); */
            if (data.state) {
              /* 权限按钮存道vuex中 */
              this.SET_USERBUTTONS(res.data.permission.buttons);
              localStorage.setItem(
                "lp-userbutton",
                JSON.stringify(res.data.permission.buttons)
              );

              localStorage.setItem("lp-token", res.data.token); //令牌存到本地
              localStorage.setItem(
                "lp-userInfo",
                JSON.stringify(res.data.userInfo)
              ); //信息存道本地
              //this.$store.dispatch('FETCH_MENU_LIST')
              this.SET_USERINFO(res.data.userInfo);
              this.$router.push("/"); //跳转页面

              loading.close(); //关闭动画
            }
          });
        });
      }
    },
  },
};
</script>

/* 样式 */

<style lang="less" scoped>
/* 登录成功 */
.icon-succeed {
  position: absolute;
  top: 100px;
  right: 96px;
  width: 50px;
  height: 50px;
}

/* 角标 */
.icon {
  color: #fff;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  cursor: pointer;
}
.erwei {
  margin: 161px 78px;
  width: 250px;
  height: 250px;
  position: relative;
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(225, 225, 225, 0.8);
  }
  img {
    width: 100%;
    height: 100%;
  }
  p {
    text-align: center;
    color: white;
    margin-top: 10px;
  }
}

&/deep/ path {
  fill: #fff !important;
}
body {
  position: relative;
  margin: 0;
  padding: 0;
}
.Home {
  .bj {
    position: absolute;
    z-index: 0;
    top: 200px;
    left: 400px;
    opacity: 0.7;
  }
}
/* 视频 */
video {
  position: fixed;
  z-index: 0;
  right: 0;
  height: 0;
  min-width: 100%;
  min-height: 100%; //不会因视频尺寸造成页面需要滚动
  width: auto;
  height: auto; //尺寸保持原视频大小
}

.login {
  h1 {
    color: white;

    position: absolute;
    top: 80px;
    right: 60px;
  }
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 500px;
  background: rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  right: 160px;
  top: 100px;
  border-radius: 10px;
  &/deep/ .el-form {
    margin-top: 200px;
  }
  &/deep/.el-input__inner {
    width: 250px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
  }
  &/deep/.el-button {
    width: 250px;
    background: linear-gradient(90deg, #1596fb, #002dff);
  }
  &/deep/ .el-form-item__label {
    color: white;
  }
  &/deep/.el-input__inner {
    color: #fff;
  }
  &/deep/.captcha {
    width: 100px !important;
    input {
      width: 100px;
      border-radius: 0;
      border-right: 0;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
  }
  .input-right {
    float: right;
    margin-top: 1px;
    margin-right: 51px;
    width: 148px;
    height: 38px;
    border: 1px solid #fff;
    border-left: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    &/deep/ svg {
      position: absolute !important;
      bottom: 4px !important;
      right: 39px !important;
      height: 36px;
    }
  }
}
</style>
